<template>
  <Row class="banner">
    <Col :span="24">
      <a-carousel
        class="w-full h-40 rounded-lg overflow-hidden"
        indicator-type="slider"
        show-arrow="hover"
        auto-play
      >
        <a-carousel-item v-for="(src, idx) in imageSrc" :key="idx">
          <div>
            <img class="w-full" :src="src" />
          </div>
        </a-carousel-item>
      </a-carousel>
    </Col>
  </Row>
</template>

<script lang="ts" setup>
  import { ref } from 'vue';
  import { Row, Col } from 'ant-design-vue';
  const imageSrc = ref<any>([
    '//p3-armor.byteimg.com/tos-cn-i-49unhts6dw/5cc3cd1d994b7ef9db6a1f619a22addd.jpg~tplv-49unhts6dw-image.image',
    '//p3-armor.byteimg.com/tos-cn-i-49unhts6dw/f256cbcc287139e191fecea9d255a1f0.jpg~tplv-49unhts6dw-image.image',
    '//p3-armor.byteimg.com/tos-cn-i-49unhts6dw/b557ff0cd44146a2e471b477af2f30d0.jpg~tplv-49unhts6dw-image.image',
    '//p3-armor.byteimg.com/tos-cn-i-49unhts6dw/665106f4bbd2a2df96eaf7aec52f7bc3.jpg~tplv-49unhts6dw-image.image',
    '//p3-armor.byteimg.com/tos-cn-i-49unhts6dw/ea095a2c9c72b5d8f2f2818040db736d.jpg~tplv-49unhts6dw-image.image',
  ]);
</script>

<style scoped lang="less">
  .banner {
    width: 100%;
    padding: 20px;
    background-color: #fff;
    border-radius: 4px 4px 0 0;
  }
</style>
